<template>
  <div>
    <div class="main">
      <!-- 一个菜单 -->
      <div class="img-box" @click="toCaiPuPage()">
        <img :src="pic" class="auto-img" />
      </div>
      <div class="infos">
        <span class="title">{{ title }}</span>
        <span class="author">包含{{ count }}篇菜谱</span>
        <span class="author">这里收集了大量的美食</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: Number,
  },
  data() {
    return {
      pic:
        "https://i3.meishichina.com/attachment/recipe/2018/02/02/20180202151754147560613.jpg?x-oss-process=style/c320",
      title: "一个菜单",
      url:
        "https://i3.meishichina.com/attachment/recipe/2018/02/02/20180202151754147560613.jpg?x-oss-process=style/c320",
      authorName: "王楷",
      authorUrl: "",
      count: 1,
    };
  },
  methods: {
    toAuthorPage() {
      //todo
      this.$router.push("/index");
    },
    toCaiPuPage() {
      //todo
      this.$router.push("/caidan/" + this.id);
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  border: 2px solid honeydew;
  border-radius: 4px;
  overflow: hidden;
  &:hover {
    cursor: pointer;
    border: 2px solid  rgba(245, 133, 133, 1);
  }
  .img-box {
    width: 200px;
    height: 150px;
    perspective: 200px;
    border: 0;
    overflow: hidden;
    position: relative;
    &:hover {
      cursor: pointer;
      img {
        transform: translateZ(20px);
      }
    }
    img {
      height: 100%;
      width: 100%;
      transition: 1s all;
    }
  }
  .infos {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    margin-left: 20px;
    .title {
      font-size: 25px;
    }
  }
}
</style>

